﻿@{
    Layout = null;
    @*ViewData["Title"] = "show";
        Layout = "~/Views/Shared/_Layout1.cshtml";*@
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>类别管理</title>
    <script src="~/vue/vue.js"></script>
    <script src="~/element-ui/index.js"></script>
    <link href="~/element-ui/theme-chalk/index.css" rel="stylesheet" />
    <script src="~/vue/vue-resource.js"></script>
    <script src="~/lib/jquery/dist/jquery.js"></script>
    <script src="~/vue/vue-resource.js"></script>
    <style>
        .el-header {
            background-color: #B3C0D1;
            color: #333;
            line-height: 60px;
        }

        .el-aside {
            color: #333;
        }
        /*去掉a标签的下划线*/
        a {
            color: black;
            text-decoration: none;
        }
    </style>
</head>
<body>
    <el-container>
        <el-header>
            <el-header style="font-size: 50px;background-color:#545c64">
                <el-menu mode="horizontal" background-color="#545c64">
                    <el-menu-item>
                        <img src="~/Img/silvon-inc-20-240.png" style="width:50px;height:50px" />
                        <a style="font-size:30px;color:white">商城管理后台</a>
                    </el-menu-item>
                    <el-menu-item>
                        <a style="font-size:20px;color:white">首页</a>
                    </el-menu-item>
                    <el-menu-item>
                        <a href="/Community/Index" style="font-size:20px;color:white">商品</a>
                    </el-menu-item>
                    <el-menu-item>
                        <a style="font-size:20px;color:white">订单</a>
                    </el-menu-item>
                    <el-menu-item>
                        <a style="font-size:20px;color:white">用户</a>
                    </el-menu-item>
                    <el-menu-item>
                        <a style="font-size:20px;color:white">促销</a>
                    </el-menu-item>
                    <el-menu-item>
                        <a style="font-size:20px;color:white">权限</a>
                    </el-menu-item>
                </el-menu>
            </el-header>
            <el-container>
                <el-aside width="200px">
                    <el-menu default-active="2"
                             class="el-menu-vertical-demo"
                             background-color="#545c64"
                             text-color="#fff"
                             style="height:860px"
                             active-text-color="#ffd04b">

                        <a href="/community/index"><el-menu-item index="1-1">商品列表</el-menu-item></a>
                        <a href="/community/Add"><el-menu-item index="1-2">添加商品</el-menu-item></a>
                        <a href="/community/show"><el-menu-item index="1-3">商品分类</el-menu-item></a>
                    </el-menu>
                </el-aside>
                <el-main>

                    <div>
                        <el-button type="primary" @@click="add">添加</el-button>
                        @* 数据网格 *@
                        <el-table :data="tableData" border
                                  style="width: 100%">
                            <el-table-column label="序号"
                                             width="50"
                                             header-align="center"
                                             align="center">
                                <template slot-scope="scope">
                                    {{scope.$index+1}}
                                </template>
                            </el-table-column>
                            <el-table-column prop="typeName"
                                             label="分类"
                                             width="180"
                                             header-align="center"
                                             align="center">
                            </el-table-column>
                            <el-table-column prop="icon"
                                             label="分类图标"
                                             width="180"
                                             header-align="center"
                                             align="center">
                                <template slot-scope="scope">
                                    <img :src="scope.row.icon" style="width:100px;height:50px;" />
                                </template>
                            </el-table-column>
                            <el-table-column prop="ranks"
                                             label="级别"
                                             width="100"
                                             header-align="center"
                                             align="center">
                            </el-table-column>
                            <el-table-column prop="counts"
                                             label="商品数量"
                                             width="120"
                                             header-align="center"
                                             align="center">
                            </el-table-column>
                            <el-table-column prop="commodityState"
                                             label="是否上架"
                                             width="100"
                                             header-align="center"
                                             align="center">
                                <template scope="scope">
                                    <el-switch on-color="#5B7BFA"
                                               off-color="#dadde5"
                                               v-model="scope.row.commodityState">
                                    </el-switch>
                                </template>
                            </el-table-column>
                            <el-table-column label="操作"
                                             width="180"
                                             header-align="center"
                                             align="center">
                                <template slot-scope="scope">
                                    <el-button size="mini"
                                               type="primary"
                                               @@click="Edit(scope.$index, scope.row)">修改</el-button>
                                    <el-button size="mini"
                                               type="danger"
                                               v-on:click="Delete(scope.$index, scope.row)">删除</el-button>
                                </template>
                            </el-table-column>

                            </el-table>
                            @* 分页 *@

                            <el-pagination class="mpage" :model="current" ref="current"
                                           background
                                           @@size-change="handleSizeChange" @*修改显示条数触发事件*@
                                           @@current-change="page" @*换页触发事件*@
                                           :current-page="current.currentPage"
                                           :page-sizes="[2, 4, 6]"
                                           :page-size="current.pageSize"
                                           layout="total, sizes, prev, pager, next, jumper"
                                           :total="current.total">
                            </el-pagination>
                        </div>
                        @* 添加的弹框 *@
                        <el-dialog title="添加类别" :visible.sync="addShow" width="600px">
                            @*<el-form ref="form" :model="form" label-width="80px">*@
                            <el-form :model="addForm" label-width="80px">
                                <el-form-item label="类别名称">
                                    <el-input v-model="addForm.typeName" :style="{width:showWidth}"></el-input>
                                </el-form-item>
                                <el-form-item label="商品数量">
                                    <el-input v-model="addForm.counts" :style="{width:showWidth}"></el-input>
                                </el-form-item>
                                <el-form-item label="级别">
                                    <el-input v-model="addForm.ranks" :style="{width:showWidth}"></el-input>
                                </el-form-item>
                                <el-form-item label="分类描述">
                                    <el-input v-model="addForm.describe" :style="{width:showWidth}"></el-input>
                                </el-form-item>

                                <el-form-item label="注册时间">
                                    <el-date-picker v-model="addForm.createTime"
                                                    type="date"
                                                    :style="{width:showWidth}"
                                                    format="yyyy 年 MM 月 dd 日"
                                                    value-format="yyyy-MM-dd"
                                                    placeholder="注册时间">
                                    </el-date-picker>
                                </el-form-item>
                            </el-form>
                            <div slot="footer" class="dialog-footer">
                                <el-button @@click="addShow = false">取 消</el-button>
                                <el-button type="primary" v-on:click="addData">确 定</el-button>
                            </div>
                        </el-dialog>
                        <el-dialog title="编辑分类" :visible.sync="editShow" width="600px">
                            @*<el-form ref="form" :model="form" label-width="80px">*@
                            <el-form :model="editForm" label-width="80px">
                                <el-form-item label="分类名称">
                                    <el-input v-model="editForm.typeName" :style="{width:showWidth}"></el-input>
                                </el-form-item>
                                <el-form-item label="商品数量">
                                    <el-input v-model="editForm.counts" :style="{width:showWidth}"></el-input>
                                </el-form-item>
                                <el-form-item label="级别">
                                    <el-input v-model="editForm.ranks" :style="{width:showWidth}"></el-input>
                                </el-form-item>
                                <el-form-item label="描述">
                                    <el-input v-model="editForm.describe" :style="{width:showWidth}"></el-input>
                                </el-form-item>

                                <el-form-item label="时间">
                                    <el-date-picker v-model="editForm.createTime"
                                                    type="date"
                                                    :style="{width:showWidth}"
                                                    format="yyyy 年 MM 月 dd 日"
                                                    value-format="yyyy-MM-dd"
                                                    placeholder="时间">
                                    </el-date-picker>
                                </el-form-item>
                            </el-form>
                            <div slot="footer" class="dialog-footer">
                                <el-button @@click="editShow = false">取 消</el-button>
                                <el-button type="primary" v-on:click="editData">确 定</el-button>
                            </div>
                        </el-dialog>
                    </div>
                    <script>
                        new Vue({
                            el: '#user',
                            data() {
                                return {
                                    //数据网格
                                    tableData: [],
                                    //查询
                                    search: {
                                        name: '',
                                        state: ''
                                    },//添加表单
                                    addForm: {
                                        typeName: '',
                                        counts: '',
                                        describe: '',
                                        ranks: '',
                                        createTime: '',
                                    },
                                    //编辑表单
                                    editForm: {
                                        id: '',
                                        typeName: '',
                                        counts: '',
                                        describe: '',
                                        ranks: '',
                                        createTime: '',
                                    },
                                    //弹框是否显示
                                    addShow: false,
                                    editShow: false,
                                    //表单input宽
                                    showWidth: '300px',
                                    //分页
                                    current: {
                                        //默认
                                        currentPage: 1,//页码
                                        total: 0,//总共多少条
                                        pageSize: 2//每页多少条数据
                                    },
                                }
                            },
                            created: function () {
                                this.getData();
                            },
                            methods: {
                                //显示
                                getData() {
                                    var url = 'http://localhost:62874/api/Typee/Index';
                                    this.$http.get(url, {params: { name: this.search.name } }).then(function (result) {
                                        this.tableData = result.body.data;
                                        this.current.total = result.body.total;
                                    });
                                },
                                //添加数据
                                addData() {
                                    var url = 'http://localhost:62874/api/Typee/Add';
                                    var data = JSON.stringify(this.addForm);
                                    this.$http.post(url, data, { emulateJSON: true }).then(function (result) {
                                        if (result.body > 0) {
                                            this.addShow = false;
                                            this.$message.success("添加成功!");
                                            this.getData();
                                        } else {
                                            this.$message.success("添加失败!");
                                        }
                                    });
                                },
                                //修改数据
                                editData() {
                                    var url = 'http://localhost:62874/api/Typee/Edit';
                                    var data = JSON.stringify(this.editForm);
                                    this.$http.put(url, data, { emulateJSON: true }).then(function (result) {
                                        if (result.body > 0) {
                                            this.$message.success("修改成功!");
                                            this.editShow = false;
                                            this.getData();
                                        } else {
                                            this.$message.success("修改失败!");
                                        }
                                    });
                                },
                                //点击添加触发的事件
                                add() {
                                    this.addShow = true;
                                },
                                //点击修改触发的事件
                                Edit(idx, row) {
                                    this.editShow = true;
                                    this.editForm = row;
                                },
                                //删除
                                Delete(idx, row) {
                                    var url = 'http://localhost:62874/api/Typee/Del';
                                    this.$http.delete(url, { params: { id: row.typeId } }).then(function (result) {
                                        if (result.body > 0) {
                                            this.getData();
                                            this.$message.success("删除成功!");
                                        } else {
                                            this.$message.success("删除失败!");
                                        }
                                    });
                                },
                                //查询
                                onSearch() {
                                    this.getData();
                                },
                                page(value) {
                                    this.current.currentPage = value;
                                    this.getData();
                                },
                                handleSizeChange(val) {
                                    this.current.pageSize = val;
                                    this.getData();
                                }
                            }
                        });

                    </script>
                </el-main>
            </el-container>
</body>
</html>